// 混合Mixin（宏）
// 定义混合：.混合名{属性集合} 或 .混合名(){属性集合}
// 使用混合：.混合名 或 .混合名();

// 缺点：类似或相同的样式无法复用
/* .box1{
    width: 100px;
    height: 100px;
    margin: 10px;
    background-color: lightblue;
}
.box2{
    width: 100px;
    height: 100px;
    margin: 10px;
    background-color: lightgreen;
} */

// 混合1
.mixin1{// 定义混合
    width: 100px;
    height: 100px;
    margin: 10px;
}
.box1{
    .mixin1;// 使用混合
    background-color: lightblue;
}
.box2{
    .mixin1;// 使用混合
    background-color: lightgreen;
}

// 混合2
.mixin2(@w,@h,@m,@bgc){
    width: @w;
    height: @h;
    margin: @m;
    background-color: @bgc;
}
.box3{
    .mixin2(200px,100px,10px,pink);
}
.box4{
    .mixin2(300px,110px,12px,blue);
}

// 混合的命名参数(设置形参的默认值，传递命名的实参)
.mixin3(@w:100px,@h:100px,@m:10px,@bgc:pink){
    width: @w;
    height: @h;
    margin: @m;
    background-color: @bgc;
}
.box5{
    .mixin3(@m:5px,@w:200px);
}
.box6{
    .mixin3(@m:8px,@w:300px,@bgc:blue);
}

// @arguments 包含调用混合时传递的所有实参
.mixin4(@x,@y,@blur,@color){
    width: 200px;
    height: 100px;
    background-color: #000;
    // box-shadow: @x @y @blur @color;
    box-shadow: @arguments;
}
.box7{
    .mixin4(5px,5px,10px,blue);
}

// 混合的匹配模式
// 类似于js中的选择语句
// 将混合分为两部分：必须部分+选择部分
// 必须部分 包含一个形参 @x
// 选择部分 包含一个标识符 color1

// 必须部分
.mixin5(@x){
    width: 200px;
    height: 100px;
    margin: 10px;
    padding: 10px;
}

// 选择部分
.mixin5(color1){
    background-color: lightblue;
}
.mixin5(color2){
    background-color: lightgreen;
}
.mixin5(color3){
    background-color: lightpink;
}
.box8{
    .mixin5(color1);
}

// 混合的守卫
// 添加守卫允许我们使用> >= < <= = 来进行逻辑判断
.mixin6(@num) when(@num>100){
    background-color: red;
}
.mixin6(@num) when(@num<=100){
    background-color: green;
}
.box9{
    width: 200px;
    height: 100px;
    .mixin6(88);
}

.mixin7(@num) when(@num>50) and (@num<100){// 逻辑与
    background-color: pink;
}
.mixin7(@num) when(@num<50),(@num>100){// 逻辑或
    background-color: blue;
}
.mixin7(@num) when not (@num=88){// 逻辑非
    background-color: yellow;
}
.box10{
    width: 200px;
    height: 100px;
    .mixin7(18);
}